<script setup lang="ts">
import tableGrid from './components/tableGrid.vue';
import { ref, reactive } from 'vue';

// 表格数据
const tableData = ref([
  { id: 10001, name: 'Test1', date: '', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
  { id: 10002, name: 'Test2', date: '', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  { id: 10003, name: 'Test3', date: '', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
  { id: 10004, name: 'Test4', date: '', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
])

// 表格配置
const tableConfig = reactive({
  columns: [
    { field: 'seq', type: 'seq', width: 70, fixed: 'left' },
    { field: 'checkbox', type: 'checkbox', width: 70 },
    { type: 'expand', width: 80, slots: { content: 'expand_content' } },
    { field: 'name', title: 'Name', align: 'center', headerAlign: 'center', footerAlign: 'center', editRender: { name: 'input' } },
    { field: 'date', title: '日期', align: 'center', headerAlign: 'center', footerAlign: 'center', width: 180, editRender: { name: 'VxeDatePicker', props: { type: 'date' } } },
    {
      field: 'sex', title: 'Sex', align: 'center', headerAlign: 'center', footerAlign: 'center', editRender: {
        name: 'select',
        options: [{ label: '未知', value: '' },
        { label: '女', value: 'Women' },
        { label: '男', value: 'Man' }]
      }
    },
    { field: 'age', title: 'Age', align: 'center', headerAlign: 'center', footerAlign: 'center', editRender: { name: 'VxeNumberInput', props: { type: 'integer' } } }
  ],
  footerData: [
    { seq: '合计', sex: '666', age: '999' },
    { seq: '平均', sex: '888', age: '333' }
  ]
})

// 处理筛选事件
const handleFilter = (filterConfig: any) => {
  console.log('筛选配置：', filterConfig)
  // 这里可以根据筛选配置处理数据
}
// 处理查询事件
const handleSearch = (filterConfig: any) => {
  console.log('查询：', filterConfig)
  // 这里可以处理数据
}
// 处理重置事件
const handleResetr = (filterConfig: any) => {
  console.log('重置：', filterConfig)
  // 这里可以处理数据
}
</script>

<template>
  <div>
    <tableGrid 
      :table-data="tableData"
      :table-config="tableConfig"
      :if-form="true"
      @filter="handleFilter"
      @search="handleSearch"
      @reset="handleResetr"
    ></tableGrid>
  </div>
</template>

<style>
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>
